<template>
	<div class='flex flex-item-center invite-material'>
	    <div class='title-box'>
	      <div class='title-line'></div>
	      <slot class="title" name='title'></slot>
	    </div>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				
			}
		}
	}
</script>

<style lang="less" rel="stylesheet/less">
.title-box{
  height: 0.76rem;
  position: relative;
  width: 100%;
}
.title-box .title{
  position: absolute;
  left: 50%;
  padding: 0 0.25rem;
  font-size: 0.32rem;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  font-family:PingFangSC-Regular;
  color:#fbcd00;
  background-color: #4937a6;
  font-weight: bold;
  text-align: center;
  display: block;
}
.title-line{
  height: 50%;
  width: 3rem;
  margin: 0 auto;
  border-bottom: 0.02rem solid #fbcd00;
  transform: translateY(0.01rem);
  -webkit-transform: translateY(0.01rem);
}
</style>